<template>
  <div>
    <NavHeader></NavHeader>
    <!-- 吸顶的导航栏 -->
    <div class="product-box"><Buy :msg="msg"></Buy></div>

    <!-- 产品详细 -->
    <div class="msg">
      <div v-html="goods" class="haha" ref="hehe"></div>
    </div>
    <NavFooter></NavFooter>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader2.vue";
import NavFooter from "@/components/NavFooter.vue";
import { getDetailgoods } from "../assets/request";
import Buy from "../components/Buy.vue";

export default {
  components: {
    Buy,
    NavHeader,
    NavFooter,
  },
  data() {
    return {
      goods: "",
      msg: "",
    };
  },
  async created() {
    // 先拿到传递过来的id,并请求数据
    console.log(this.$route.params.id);
    let res = await getDetailgoods(this.$route.params.id);
    console.log(res);
    this.goods = res.rich_text;
    this.msg = res;
  },
  updated() {
    let obj = this.$refs.hehe;
    let imgs = obj.querySelectorAll("p");
    imgs.forEach((element) => {
      element.style.width = "1226px";
      element.style.margin = "0 auto";
    });
  },
  methods: {
    gotoDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>

<style lang="scss" scoped >
.product-box {
  margin-top: 30px;
}
.buy {
  width: 1226px;
  height: 50px;
  background-color: skyblue;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// .haha p {
//   width: 1226px;
//   margin: 0 auto;
// }
.msg {
  position: relative;
  .msg-box {
    position: absolute;
    left: 50%;
    // margin-left: 30%;
    top: 20px;
    width: 482px;
    height: 216px;
    background: yellow;
    text-align: center;
  }
  .del {
    text-decoration: line-through;
  }
}
</style>